import React, { Suspense } from 'react'
// 一般都是在根组件中配置前端路由规则. 因为Route组件在哪里使用,则Route组件中配置的页面组件就渲染在哪里
import { Routes, Route, Link } from 'react-router-dom'
// 下面的引入方式会导致所有的路由组件一上来就全部加载了
// import Home from './pages/Home'
// import Login from './pages/Login'
// import Test1 from './pages/Test1'
// import Test2 from './pages/Test2'

// 使用下面的方式,可以实现路由组件的懒加载.(懒加载就是需要的时候才加载)
const Home = React.lazy(() => import('./pages/Home'))
const Login = React.lazy(() => import('./pages/Login'))
const Test1 = React.lazy(() => import('./pages/Test1'))
const Test2 = React.lazy(() => import('./pages/Test2'))
//#region
// export default function App() {
//   return (
//     <div id="app">
//       {/* 最终渲染在页面上的是a标签,Link在哪里使用,则a标签就渲染在哪里.当用户点击这个a标签的时候,会自动修改浏览器地址栏的路径,但是不发送请求 */}
//       <Link to="/home">首页</Link>
//       <Link to="/login">登录</Link>
//       {/* <Link to="/xxx/yyy">登录</Link> */}
//       <hr />
//       {/* Route是用来配置前端路由规则的. 按照react-rouerv6版本要求Route必须被Routes包裹 */}
//       <Routes>
//         {/* Route中path的值可以忽略/ .但是如果要忽略请求全部忽略 */}
//         {/* 如果path=""就表示path="/" */}
//         <Route path="/" element={<Home></Home>}></Route>
//         {/* 一级路由的Route写在哪里,则一级路由组件就渲染在哪里 */}
//         <Route path="/home" element={<Home></Home>}>
//           {/* 配置的是home下面的嵌套路由的规则 */}
//           {/* 嵌套路由的组件渲染在哪里是有Outlet的位置决定的 */}
//           <Route path="/home/test1" element={<Test1></Test1>}></Route>
//           <Route path="/home/test2" element={<Test2></Test2>}></Route>
//         </Route>
//         <Route path="/login" element={<Login></Login>}></Route>

//         {/* <Route path="xxx">
//           <Route path="yyy" element={<Login></Login>}></Route>
//         </Route> */}
//       </Routes>
//       <hr />
//     </div>
//   )
// }

//#endregion

function load(Son) {
  return (
    <Suspense
      fallback={
        <div style={{ color: 'red', fontSize: 60 }}>正在加载,请稍等...</div>
      }
    >
      <Son></Son>
    </Suspense>
  )
}
export default function App() {
  return (
    <div id="app">
      {/* 最终渲染在页面上的是a标签,Link在哪里使用,则a标签就渲染在哪里.当用户点击这个a标签的时候,会自动修改浏览器地址栏的路径,但是不发送请求 */}
      <Link to="/home">首页</Link>
      <Link to="/login">登录</Link>
      {/* <Link to="/xxx/yyy">登录</Link> */}
      <hr />
      {/* Route是用来配置前端路由规则的. 按照react-rouerv6版本要求Route必须被Routes包裹 */}
      <Routes>
        {/* Route中path的值可以忽略/ .但是如果要忽略请求全部忽略 */}
        {/* 如果path=""就表示path="/" */}
        <Route path="" element={load(Home)}></Route>
        {/* 一级路由的Route写在哪里,则一级路由组件就渲染在哪里 */}
        <Route path="home" element={load(Home)}>
          {/* 配置的是home下面的嵌套路由的规则 */}
          {/* 嵌套路由的组件渲染在哪里是有Outlet的位置决定的 */}
          <Route path="test1" element={load(Test1)}></Route>
          <Route path="test2" element={load(Test2)}></Route>
        </Route>
        <Route path="login" element={load(Login)}></Route>

        {/* <Route path="xxx">
          <Route path="yyy" element={<Login></Login>}></Route>
        </Route> */}
      </Routes>
      <hr />
    </div>
  )
}
